<template>
  <div class="app-container org">
    <el-card class="leftCard">
      <!-- 搜索条件盒子 -->
      <div>
        <p class="pinformation">搜索条件</p>
        <el-form :model="queryParams" ref="queryRef" label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="标准代号：" prop="standardCode">
                <el-input
                  v-model="queryParams.standardCode"
                  placeholder="请输入标准代号"
                  maxlength="100"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="标准名称：" prop="standardName">
                <el-input
                  v-model="queryParams.standardName"
                  maxlength="100"
                  placeholder="请输入标准名称"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="标准类型：" prop="standardTypeId">
                <el-select
                  v-model="queryParams.standardTypeId"
                  placeholder="标准类型"
                  @change="handleQuery"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="dict in proxy.addListNoLimit(lims_standard_type)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标准状态：" prop="standardStatus">
                <el-select
                  v-model="queryParams.standardStatus"
                  placeholder="标准状态"
                  @change="handleQuery"
                  clearable
                >
                  <el-option
                    v-for="dict in proxy.addListNoLimit(lims_standard_status)"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-row justify="end">
                <el-button type="success" @click="handleQuery">搜索</el-button>
                <el-button class="business resetBtn" @click="resetQuery"
                  >重置</el-button
                >
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div>
        <el-row>
          <p class="pinformation">检测标准列表</p>
          <p class="totalStyle">共 {{ standardTable.length }} 条数据</p>
        </el-row>

        <el-table
          ref="mainTableRef"
          class="business"
          v-loading="loading"
          :highlight-current-row="highLightRow"
          :data="standardTable"
          @row-click="rowClick"
          row-key="standardId"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            label="标准代号"
            align="center"
            prop="standardCode"
            show-overflow-tooltip
            width="140"
          />
          <el-table-column
            label="标准名称"
            align="center"
            prop="standardName"
          >
            <template #default="scope">
              <!-- <div v-html="proxy.getSupAndSub(scope.row.standardName)"></div> -->
              <el-tooltip
                        class="box-item"
                        effect="customized"
                        placement="right"
                      >
                        <template #content>
                          <div v-html="proxy.getSupAndSub(scope.row.standardName)"></div>
                        </template>
                        <div
                          style="
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                        >
                          <div v-html="proxy.getSupAndSub(scope.row.standardName)"></div>
                        </div>
                      </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            label="标准类型"
            align="center"
            prop="standardTypeId"
            width="80"
          >
            <template #default="scope">
              <dict-tag
                :options="lims_standard_type"
                :value="scope.row.standardTypeId"
              />
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="standardStatus" width="80">
            <template #default="scope">
              <dict-tag
                :options="lims_standard_status"
                :value="scope.row.standardStatus"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="rightCard">
      <!-- 基础信息 -->
      <el-form label-width="110px" :model="form" ref="standardRef">
        <div>
          <el-row style="margin-bottom: 5px">
            <el-col :span="22">
              <p class="pinformation">基础信息</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="标准代号：">{{
                form.standardCode || "/"
              }}</el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="标准名称：" prop="standardName">
                <div v-html="proxy.getSupAndSub(form.standardName)"></div>
                <div v-if="!form.standardName">/</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="上级标准代号：" prop="StandardId">
                {{ form.pStandardName || "/" }}
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="英文名称：" prop="standardEnglishName">{{
                form.standardEnglishName || "/"
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="当前状态：">
                <dict-tag
                  :options="lims_standard_status"
                  :value="form.standardStatus"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="标准类型：" prop="standardTypeId">
                <dict-tag
                  :options="lims_standard_type"
                  :value="form.standardTypeId"
                  v-if="form.standardTypeId >= 0"
                />
                <div v-else>/</div>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="发布部门：" prop="publishDeptName">{{
                form.publishDeptName || "/"
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="发布日期：" prop="publishDate">{{
                proxy.parseTime(form.publishDate, "{y}-{m}-{d}") || "/"
              }}</el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="实施日期：" prop="implDate">{{
                proxy.parseTime(form.implDate, "{y}-{m}-{d}") || "/"
              }}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="排序号：" prop="orderId">{{
                form.orderId || "/"
              }}</el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <!-- 检测方法子表 -->
      <div>
        <div>
          <el-row>
            <p class="pinformation">检测方法</p>
            <p class="totalStyle">
              共
              <template v-if="form.basicMethodList">{{
                form.basicMethodList.length
              }}</template>
              <template v-else>0</template> 条数据
            </p>
          </el-row>
        </div>
        <el-table
          :data="form.basicMethodList"
          ref="subTableRef"
          v-loading="basicMethodLoading"
        >
          <el-table-column
            label="方法编号"
            prop="methodCode"
            align="center"
            width="200"
          />
          <el-table-column label="方法名称" prop="methodName" align="center" />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
          >
            <template #default="scope">
              <el-button link type="success" icon="View" @click="details(scope)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation">关联附件</p>
        <p class="totalStyle">共 {{ form.fileList.length }} 条数据</p>
      </el-row>
      <el-table
        :data="form.fileList"
        class="business"
        border
        ref="fileTableRef"
      >
        <el-table-column
          label="文件编号"
          align="center"
          prop="fileCode"
          width="220"
        />
        <el-table-column label="文件名称" align="center" prop="fileMc">
          <template #default="scope">
            <span
              @click="proxy.downloadFile(scope.row.fileList)"
              class="fileNameHover"
              >{{ scope.row.fileMc }}</span
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup name="Standard">
import { listStandard, getStandard } from "@/api/store/standard";
import { listMethod } from "@/api/store/method";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const { lims_standard_status, lims_standard_type } = proxy.useShareDict(
  "lims_standard_status",
  "lims_standard_type"
);

const basicMethodLoading = ref(false);

const loading = ref(false);
const total = ref(0);
const standardTable = ref([]);
const highLightRow = ref(true);
const data = reactive({
  form: {
    basicMethodList: [],
    standardStatus: 1,
    fileList: [],
  },
  queryParams: {
    standardStatus: -1,
    standardTypeId: -1,
    typeId: 0,
  },
  fileForm: {
    fileList: [],
  },
});

const { queryParams, form, fileForm } = toRefs(data);

/** 查询检测标准列表 */
function getList() {
  loading.value = true;
  listStandard(queryParams.value).then((response) => {
    standardTable.value = proxy.handleTree(
      response.data,
      "standardId",
      "pStandardId"
    );
    total.value = response.total;
    loading.value = false;
  });
}

// 表单重置
function reset() {
  form.value = {
    basicMethodList: [],
    standardStatus: 1,
    fileList: [],
  };
  proxy.resetForm("standardRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  proxy.$refs["standardRef"].clearValidate();
  handleQuery();
}

/** 修改按钮操作 */
async function rowClick(row) {
  reset();
  highLightRow.value = true;
  await getStandard(row.standardId).then((response) => {
    form.value = response.data;
  });
  listMethod({ standardId: row.standardId }).then((response) => {
    form.value.basicMethodList = response.rows;
  });
}

getList();

const heightParams = ref([
  { tableName: "main", bottomHeight: 21 },
  { tableName: "sub", bottomHeight: 235 },
  { tableName: "file", bottomHeight: 21 },
]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
})

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

const router = useRouter();

function details(scope) {
  router.push({
    path: "/basic/method",
    query: {
      methodId: scope.row.methodId,
    },
  });
}
</script>
